<script type="text/javascript" language="javascript">
    (function($) {
        /*whatever jQuery stuff*/
        $(function(){	
            jQuery.validator.addMethod("file_upload_valid", function(value, element, param) {
				var messages = '';
                var returnVal = true;
				if($('#song_id').find('input:checked').length > 1){
					messages += "- <?php echo lang('song_relate_default_over');?>\n";
				}				
				if(messages){
					jQuery.validator.messages.file_upload_valid = messages.substr(2,(messages.length-2));
					returnVal = false;	
				}
				return returnVal;
           	}, jQuery.validator.messages.file_upload_valid);	
							
            $("#Form").validate({
				ignore: "",
                rules: {
					file_upload: {
						file_upload_valid:true
					},					
					media_type_id: "required",
					song_name: "required",
					artist_name: "required",
					album_name: "required",
					letters: "required",
					chords_tag: "required"
                },
                showErrors: function(errorMap, errorList){
                    var messages='';
                    for (var i = 0; i < errorList.length; i++) {					
                        messages += '- '+errorList[i].message+'\n';
                    }
                    if(messages) alert("<?php echo lang('requirement');?>: \n"+"¯¯¯¯¯¯¯¯¯¯ \n"+ messages);
                    //this.defaultShowErrors();
                } ,
                submitHandler: function(e){
					$('.ajax-loading',e).css('visibility','visible');
					if(queueSize > 0){
						$('#file_upload').uploadifyUpload();
					} else { success_file = true; }
					if(queueSize2 > 0){
						$('#file_upload2').uploadifyUpload();
					} else { success_file2 = true; }
					if(queueSize3 > 0){
						$('#file_upload3').uploadifyUpload();
					} else { success_file3 = true; }														
					var interval = setInterval(function() {
					    if (success_file && success_file2 && success_file3) {
					        clearInterval(interval);
							//Send Form
					        document.forms["Form"].submit();
					    }
					}, 100);
                },
                onfocusout: false,
                onkeyup: false,
				onclick: false,					
                messages: {
					media_type_id: "<?php echo lang('media_type');?>",
					song_name: "<?php echo lang('chords_song_name');?>",
					artist_name: "<?php echo lang('chords_artist_name');?>",
					album_name: "<?php echo lang('chords_album_name');?>",
					letters: "<?php echo lang('letters');?>",
					chords_tag: "<?php echo lang('chords_tag');?>"
                }
            });	
			
            /*Images Upload*/
            var queueSize = 0;		
            var imgname= new Array();
			var success_file = false;					
            $('#file_upload').uploadify({
                'uploader'  : '<?php echo base_url();?>uploadify.swf',				
                'script'    : '<?php echo base_url();?>uploadify.php',
                'cancelImg' : '<?php echo js_asset_url("uploadify/cancel.png"); ?>',
                'folder'    : "<?php echo substr($this->temp_folder,0,-1);?>",
                'fileExt'   : '*.jpg;*.JPG;*.gif;*.GIF;*.png;*.PNG',
                'fileDesc'  : 'All Files',
				'scriptAccess' : 'always',			
                'auto'      : false,
                'multi'     : true,
                'onComplete' : function(event, ID, fileObj, response, data){
                    imgname.push(response);
                },
                'onAllComplete' : function(event,data) {
					$('<input>').attr({
					    type: 'hidden',
					    id: 'uploadify_store',
					    name: 'uploadify_store',
						value: imgname
					}).appendTo('Form');
					//document.forms["Form"].submit();					
					success_file=true;
                },
                'onSelectOnce' : function (event,data) {
                    queueSize = data.fileCount;
                },
                'onCancel' : function (event,ID,fileObj,data) {
                    queueSize = data.fileCount;
                }						
            });	
			
            /*Images Upload*/
            var queueSize2 = 0;		
            var imgname2= new Array();
			var success_file2 = false;					
            $('#file_upload2').uploadify({
                'uploader'  : '<?php echo base_url();?>uploadify.swf',				
                'script'    : '<?php echo base_url();?>uploadify.php',
                'cancelImg' : '<?php echo js_asset_url("uploadify/cancel.png"); ?>',
                'folder'    : "<?php echo substr($this->temp_folder,0,-1);?>",
                'fileExt'   : '*.jpg;*.JPG;*.gif;*.GIF;*.png;*.PNG',
                'fileDesc'  : 'All Files',
				'scriptAccess' : 'always',			
                'auto'      : false,
                'multi'     : true,
                'onComplete' : function(event, ID, fileObj, response, data){
                    imgname2.push(response);
                },
                'onAllComplete' : function(event,data) {
					$('<input>').attr({
					    type: 'hidden',
					    id: 'uploadify_store2',
					    name: 'uploadify_store2',
						value: imgname2
					}).appendTo('Form');
					//document.forms["Form"].submit();					
					success_file2=true;
                },
                'onSelectOnce' : function (event,data) {
                    queueSize2 = data.fileCount;
                },
                'onCancel' : function (event,ID,fileObj,data) {
                    queueSize2 = data.fileCount;
                }						
            });	
			
            /*Images Upload*/
            var queueSize3 = 0;		
            var imgname3= new Array();
			var success_file3 = false;					
            $('#file_upload3').uploadify({
                'uploader'  : '<?php echo base_url();?>uploadify.swf',				
                'script'    : '<?php echo base_url();?>uploadify.php',
                'cancelImg' : '<?php echo js_asset_url("uploadify/cancel.png"); ?>',
                'folder'    : "<?php echo substr($this->temp_folder,0,-1);?>",
                'fileExt'   : '*.jpg;*.JPG;*.gif;*.GIF;*.png;*.PNG',
                'fileDesc'  : 'All Files',
				'scriptAccess' : 'always',			
                'auto'      : false,
                'multi'     : false,
                'onComplete' : function(event, ID, fileObj, response, data){
                    imgname3.push(response);
                },
                'onAllComplete' : function(event,data) {
					$('<input>').attr({
					    type: 'hidden',
					    id: 'uploadify_store3',
					    name: 'uploadify_store3',
						value: imgname3
					}).appendTo('Form');
					//document.forms["Form"].submit();					
					success_file3=true;
                },
                'onSelectOnce' : function (event,data) {
                    queueSize3 = data.fileCount;
                },
                'onCancel' : function (event,ID,fileObj,data) {
                    queueSize3 = data.fileCount;
                }						
            });									
			//DateTime Picker
			$('.datetime').datetimepicker({
				dateFormat:'dd/mm/yy',
				timeFormat:'hh:mm',
				separator:' ',
				changeMonth : true,
				changeYear : true,
				yearRange: '-100y:c+nn',
				maxDate: '-1d',
				showHour: true,		
				showMinute: true,
				showTime: true		
			});	
			//Genre Function
			$('.genreTag').each(function(){
				$(this).click(function(){
					if($(this).is(':checked')){
						var Delimiter = "";
						var Str = "";
						if($('#genre_tag').val() != "") Delimiter = "/";
						$('#genre_tag').val($('#genre_tag').val()+Delimiter+$(this).next().text());						
					} else {
						$('#genre_tag').val(($('#genre_tag').val().replace(new RegExp($(this).next().text()+"\/"+"|"+"\/"+$(this).next().text()+"$"+"|"+$(this).next().text(),"g"),"")));
					}
				});
			});					
			//ColorBox Iframe
			$('.search_tools').colorbox({iframe:true, innerWidth:300, innerHeight:600, right:0, opacity:0.4});			
        });
    })(jQuery);	
	/*Add/Remove List*/
	function addRemoveList(unique,id,name)
	{
		if(id == undefined && name == undefined){ //remove List
			var parentElement = $(unique).closest('ul');
			$(unique).parent().remove();
			if($('li:not(:hidden)',parentElement).length < 1){
				parentElement.find('.first').show();
			}
			//Update Fields
			$('#media_type_id').val('');
			$('#letters').val('');
			$('#song_name').val('');
			$('#artist_name').val('');
			$('#album_name').val('');
			$('#chords_tag').val('');				
		} else { //add List
			var parentElement = $('#'+unique).closest('ul');
			parentElement.find('.first').hide();
			if($('li:not(:hidden)',parentElement).length < 1){
				parentElement.prepend('<li>'+id+' - '+name+' <a href="javascript:void(0)" class="tools minus" onclick="javascript:addRemoveList(this);"></a><input type="hidden" name="'+unique+'" value="'+id+'" \/><\/li>');
				//Load Content Song
				$.ajax({
					type:'post',
					url:web_path+'/chords/ajax_load_song',
					data:({
						song_id:id
					}),
					dataType:'json'
				}).done(function(data){
					//Update Fields
					$('#media_type_id').val(''+data.media_type_id+'');
					$('#letters').val(''+data.letters+'');
					$('#song_name').val(''+data.song_name+'');
					$('#artist_name').val(''+data.artist_name+'');
					$('#album_name').val(''+data.album_name+'');
					$('#chords_tag').val(''+data.song_tag+'');
					$.each(data.genre_key,function(key,items){
						$('input[name*="genre"]:eq('+items+')').attr('checked',true);
					});
					$('#genre_tag').val(''+data.genre_name.join('/')+'');					
				});
			}		
		}
	}	
</script>
<div class="wrap">
 	<div id="icon-index" class="icon32"><br /></div><h2><?php echo ucwords(str_replace('_',' ',$this->uri->segment(1)));?> &raquo; <?php echo ucwords(str_replace('_',' ',$this->uri->segment(2)));?> &raquo; <?php echo lang($this->uri->segment(3));?></h2>
</div>
<div id="wpbody-content">
    <div class="metabox-holder" id="dashboard-widgets">
		<div class="tablenav top">
			<div class="alignleft"><input type="button" value="<?php echo lang('button_back');?>" class="button-primary" onclick="javascript:history.go(-1);"/></div>
		</div>	
            <div class="inside">			
				<form id="Form" method="post" action="" name="Form">
					<table border="0" cellspacing="0" cellpadding="0" class="form-table">
						<tbody>	
						<tr>
							<th scope="row"><?php echo lang('is_publish');?></th>
							<td>
								<input type="radio" name="is_publish" value="1" checked="checked"/> <?php echo lang('yes');?>
								<input type="radio" name="is_publish" value="0" /> <?php echo lang('no');?>
							</td>
						</tr>
						<tr>
							<th scope="row"><?php echo lang('chords_publish_date');?></th>
							<td><input type="text" name="chords_publish_date" id="chords_publish_date" class="medium-text datetime" value="<?php echo date('d/m/Y H:i');?>" readonly="readonly"/></td>
						</tr>	
						<tr>
							<th scope="row"><?php echo lang('song_relate');?> <a href="<?php echo base_url().'chords/content_management/search_song';?>" class="tools plus search_tools"></a></th>
							<td class="describe">
								<ul id="song_id" class="listItems">
									<li class="first"><?php echo lang('no_song_relate');?></li>
								</ul>
							</td>
						</tr>
						<tr>
							<th scope="row"><?php echo lang('media_type');?></th>
							<td>
								<select id="media_type_id" name="media_type_id" class="medium-text">
									<option value=""><?php echo lang('select_option');?></option>
									<?php foreach($dataMediaType as $value):?>
										<option value="<?php echo $value->media_type_id;?>"><?php echo $value->media_type_name;?></option>
									<?php endforeach;?>
								</select>
							</td>
						</tr>						
						<tr>
							<th scope="row"><?php echo lang('letters');?></th>
							<td><input type="text" name="letters" id="letters" class="small-text" maxlength="1"/></td>
						</tr>											
						<tr>
							<th scope="row"><?php echo lang('chords_song_name');?></th>
							<td><input type="text" name="song_name" id="song_name" class="medium-text" /></td>
						</tr>
						<tr>
							<th scope="row"><?php echo lang('chords_artist_name');?></th>
							<td><input type="text" name="artist_name" id="artist_name" class="medium-text" /></td>
						</tr>
						<tr>
							<th scope="row"><?php echo lang('chords_album_name');?></th>
							<td><input type="text" name="album_name" id="album_name" class="medium-text" /></td>
						</tr>
						<tr>
							<th scope="row"><?php echo lang('chords_tag');?></th>
							<td><input type="text" name="chords_tag" id="chords_tag" class="regular-text" /></td>
						</tr>
						<tr>
							<th scope="row"><?php echo lang('genre');?></th>
							<td>
								<?php if(!empty($dataGenre)):?> 
									<ul class="listItemsHorizontal">
										<?php foreach($dataGenre as $value):?>
										<li>
											<input type="checkbox" name="genre_id[]" value="<?php echo $value->genre_id;?>" class="genreTag"/> <span><?php echo $value->genre_name;?></span>
										</li>
										<?php endforeach;?>
									</ul>
								<?php endif;?>
								<input type="text" name="genre_tag" id="genre_tag" class="regular-text"/> <?php echo lang('editable');?>
							</td>
						</tr>							
						<tr>
							<th scope="row"><?php echo lang('chords_used');?></th>
							<td>
								<?php if(!empty($dataChordsTable)):?>
								<ul class="listItemsHorizontal">
									<?php asort($dataChordsTable);?>
									<?php foreach($dataChordsTable as $value):?>
										<?php $chords_name = substr($value,0,-4);?>
										<li><input type="checkbox" name="chords_used[]" value="<?php echo $chords_name;?>">&nbsp;<?php echo $chords_name;?></li>
									<?php endforeach;?>
								</ul>
								<?php endif;?>
							</td>
						</tr>																						
						<tr>
							<th scope="row"><?php echo lang('chords_image');?></th>
							<td><input type="file" name="file_upload" id="file_upload"/></td>
						</tr>
						<tr>
							<th scope="row"><?php echo lang('tabs_image');?></th>
							<td><input type="file" name="file_upload2" id="file_upload2"/></td>
						</tr>
						<tr>
							<th scope="row"><?php echo lang('album_image');?></th>
							<td><input type="file" name="file_upload3" id="file_upload3"/></td>
						</tr>						
						<tr>
							<th scope="row">&nbsp;</th>
							<td><p class="submit"><input type="submit" value="<?php echo lang('button_add');?>" class="button-primary" />&nbsp;<img alt="" class="ajax-loading" src="<?php echo css_asset_url('images/wpspin_light.gif'); ?>" /></p></td>
						</tr>								
						</tbody>
					</table>
					<div class="tablenav bottom"></div>
				</form>
            </div><!-- wpbody inside -->
    </div><!-- wpcontent -->
</div><!-- wpbody-content -->